﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin.master" AutoEventWireup="true"
    CodeFile="Mapping.aspx.cs" ValidateRequest="false" Inherits="Admin_Mapping" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" href="/Contents/imgmap.css" type="text/css">
    <link href="/Contents/file-upload/fileuploader.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        fieldset legend
        {
            padding-left: 15px;
        }
        li
        {
            color: Black;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <fieldset>
        <div>
            <div class="source_desc">
            </div>
            <div class="source_url">
                Menu:
                <asp:DropDownList ID="ddlMenu" runat="server" onchange="javascript:testingFunct(); return false;">
                </asp:DropDownList>
                Use a sample image:
                <asp:DropDownList ID="source_url3" CssClass="span7" runat="server" onchange="javascript:test(this); return false;">
                </asp:DropDownList>
            </div>
            <div style="float: right">
                <div id="file-uploader">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
            </div>
            <%--<a class="btn primary" style="float:right;" data-controls-modal="upload-image-modal"
                            data-backdrop="static">Upload an image</a>--%>
            <br />
        </div>
    </fieldset>
    <fieldset>
        Uploaded files:
        <div class="actions uploaded-files-response-container">
            <ul id="uploaded-files-response">
            </ul>
        </div>
    </fieldset>
    <fieldset>
        <%--<legend><a onclick="toggleFieldset(this.parentNode.parentNode)">Image map areas</a>
        </legend>--%>
        <div>
            <div id="button_container">
                <!-- buttons come here -->
                <img src="/Images/Imagmap/add.gif" onclick="myimgmap.addNewArea()" alt="Add new area"
                    title="Add new area" />
                <img src="/Images/Imagmap/delete.gif" onclick="myimgmap.removeArea(myimgmap.currentid)"
                    alt="Delete selected area" title="Delete selected area" />
                <img src="/Images/Imagmap/zoom.gif" id="i_preview" onclick="myimgmap.togglePreview();"
                    alt="Preview image map" title="Preview image map" />
                <%--<img src="/Images/Imagmap/html.gif" onclick="gui_htmlShow()" alt="Get image map HTML"
                    title="Get image map HTML" />--%>
                <%--<label for="dd_zoom" style="width:70px">
                    Zoom: </label>--%>
                <select onchange="gui_zoom(this)" id="dd_zoom" style="width: 100px">
                    <option value='0.25'>25%</option>
                    <option value='0.5'>50%</option>
                    <option value='1' selected="1">100%</option>
                    <option value='2'>200%</option>
                    <option value='3'>300%</option>
                </select>
                <%--<label for="dd_output" style="width:70px">
                    Output:</label>--%>
                <select id="dd_output" onchange="return gui_outputChanged(this)">
                    <option value='imagemap' selected="selected">Standard imagemap</option>
                    <option value='css'>CSS imagemap</option>
                    <option value='wiki'>Wiki imagemap</option>
                </select>
                <div style="display: none;">
                    <a class="toggler toggler_off" onclick="gui_toggleMore();return false;">More actions</a>
                    <div id="more_actions" style="display: none; position: absolute;">
                        <div>
                            <a href="" onclick="toggleBoundingBox(this); return false;">&nbsp; bounding box</a></div>
                        <div>
                            <a href="" onclick="return false">&nbsp; background color </a>
                            <input onchange="gui_colorChanged(this)" id="color1" style="display: none;" value="#ffffff"></div>
                    </div>
                </div>
            </div>
            <div style="float: right; margin: 0 5px" id="label_dropdown">
                <select onchange="changelabeling(this)">
                    <option value=''>No labeling</option>
                    <option value='%n' selected='1'>Label with numbers</option>
                    <option value='%a'>Label with alt text</option>
                    <option value='%h'>Label with href</option>
                    <option value='%c'>Label with coords</option>
                </select>
            </div>
        </div>
        <div id="form_container" style="clear: both;">
            <!-- form elements come here -->
        </div>
    </fieldset>
    <fieldset>
        <%--<legend><a onclick="toggleFieldset(this.parentNode.parentNode)">Image</a> </legend>--%>
        <div id="pic_container_container">
            <div id="pic_container">
            </div>
        </div>
    </fieldset>
    <%--    <fieldset>
        <legend><a onclick="toggleFieldset(this.parentNode.parentNode)">Status</a> </legend>
        <div id="status_container">
        </div>
    </fieldset>--%>
    <fieldset id="fieldset_html" class="fieldset_off" style="display: none;">
        <legend>Code<%--<a onclick="toggleFieldset(this.parentNode.parentNode)">Code</a>--%>
        </legend>
        <div>
            <div id="output_help">
            </div>
            <textarea id="html_container" runat="server"></textarea></div>
    </fieldset>
    <div class="actions">
        <button type="button" id="submit_button" class="btn large primary span2" data-controls-modal="upload-image-modal"
            data-backdrop="static">
            Save
        </button>
        &nbsp; <a href="ToDayList.aspx" class="btn large ">Cancel</a>
    </div>
    <div id="upload-image-modal" class="modal hide fade" style="display: none;">
        <div class="modal-header">
            <a href="#" class="close">×</a>
            <h3>
                Saving...</h3>
        </div>
        <div class="modal-body">
            <img id="ajax-loader" src="/images/ajax-loader.gif" />
        </div>
        <%--<div class="modal-footer">
            <a href="#" class="btn primary">Primary</a>
            <a href="#" class="btn secondary">Secondary</a>
        </div>--%>
    </div>
    <script type="text/javascript" src="/Contents/file-upload/fileuploader.js"></script>
    <script type="text/javascript" src="/Contents/bootstrap-modal.js"></script>
    <script type="text/javascript" src="/Contents/imgmap.js"></script>
    <script type="text/javascript" src="/Contents/json.js"></script>
    <script type="text/javascript" src="/Contents/jquery.colorPicker.js"></script>
    <script type="text/javascript" src="/Contents/default_interface.js"></script>
    <asp:Literal runat="server" ID="SerializedObject"></asp:Literal>
    <script type="text/javascript">
        var Commerial = "";
        $('#submit_button').click(function () {

            var f = document.getElementById('source_url3');
            var image_url = f.options[f.selectedIndex].text;
            lastSelectedImageUrl = image_url;
            test(f);


            $.post('/Handlers/MappingHandler.ashx', { "id": logoInfoId, "details": JSON.stringify(detailToDetail) }, function (d) {

                //console.log(d);

                if (d.result == "success") {
                    alert('Your changes have been saved successfully.');

                    window.location.href = "ToDayList.aspx";

                }
                else {
                    alert('Some error occured while saving changes.');

                }

            });

            //return false;
        });

        $(function () {
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '/Handlers/UploadHandler.ashx',
                debug: true,
                async: false,
                allowedExtensions: ["png", "gif", "jpg"],
                listElement: document.getElementById('uploaded-files-response'),
                onComplete: function (id, fileName, responseJSON) {

                    //console.log(responseJSON);

                    var resultDiv = document.getElementById('file-upload-result');
                    try {
                        resultDiv.innerHTML = "File has been uploaded successfully, copy the url above and start using.";
                    } catch (e) {

                    }

                }
            });
        });



        //console.log(detailToDetail);
        function getScriptFromJson(fileName) {
            for (var i = 0; i < detailToDetail.length; i++) {
                if (detailToDetail[i]["FileName"] == fileName) {
                    //console.log(detailToDetail[i]);
                    return detailToDetail[i];
                }
            }
        }
        function setScriptInJson(fileName, script) {
            for (var i = 0; i < detailToDetail.length; i++) {
                if (detailToDetail[i]["FileName"] == fileName) {
                    //console.log(detailToDetail[i]);

                    var map_id = myimgmap.getMapId();

                    var imgtag = '<img usemap="#' + map_id + '"  src="' + detailToDetail[i]["FileName"] + '" alt="' + detailToDetail[i]["Description"] + '">';

                    //script = script.replace(map_id, map_id + new Date().getMilliseconds());

                    detailToDetail[i]["TempScript"] = script;
                    detailToDetail[i]["Scripts"] = imgtag + script;
                    //console.log(detailToDetail[i]);
                    break;
                }
            }
        }
        function testingFunct() {
            var f = document.getElementById('source_url3');
            if (lastSelectedImageUrl) {
                setScriptInJson(lastSelectedImageUrl, document.getElementById('html_container').value);
            }
            var image_url = f.options[f.selectedIndex].text;
            // get object
            var detailObj = getScriptFromJson(image_url);
            //console.log(detailObj)
            lastSelectedImageUrl = image_url;

            // store temp script first
            // because it is updated by following method if not stored here
            var temp_script = detailObj["TempScript"] || (detailObj["Scripts"] && detailObj["Scripts"].substring(detailObj["Scripts"].indexOf('>') + 1)) || "";

            detailObj["MenuId"] = $("#ddlMenu").val();
        }

        var lastSelectedImageUrl = "";
        function test(f) {
            if (lastSelectedImageUrl) {
                setScriptInJson(lastSelectedImageUrl, document.getElementById('html_container').value);
            }
            var image_url = f.options[f.selectedIndex].text;
            // get object
            var detailObj = getScriptFromJson(image_url);
            lastSelectedImageUrl = image_url;

            // store temp script first
            // because it is updated by following method if not stored here
            var temp_script = detailObj["TempScript"] || (detailObj["Scripts"] && detailObj["Scripts"].substring(detailObj["Scripts"].indexOf('>') + 1)) || "";

            var menu = detailObj["MenuId"];
            if (menu == null)
                menu = 0;
            $("#ddlMenu").val(menu);
            gui_loadImage(image_url);
            // use temp script here.
            document.getElementById('html_container').setAttribute('oldvalue', '');
            document.getElementById('html_container').value = temp_script;

            // update areas.
            gui_htmlBlur();
        }

        test(document.getElementById('source_url3'));

        function onHtmlChanged_Custom(str) {

            //console.log('onHtmlChanged_Custom: ' + str);

            //            var f = document.getElementById('source_url3');
            //            var imageUrl = f.options[f.selectedIndex].text;
            //            setScriptInJson(imageUrl, str);


        }
        function CopyToClipboard(arg) {
            $(arg).zclip({
                path: "/Contents/ZeroClipboard.swf",
                copy: function () {
                    return this.title;
                },
                afterCopy: function () {
                    alert('The url has been copied to your clipboard.');
                }
            });

            return false;
        }
    </script>
</asp:Content>
